<template>
	<div>
		<detail-banner :gallaryImgs="gallaryImgs" :sightName="sightName" :bannerImg="bannerImg"></detail-banner>
		<detail-header ></detail-header>
		<detail-list :categoryList="categoryList"></detail-list>
		<div class="container"></div>
	</div>
</template>

<script>
import detailBanner from './components/banner'
import detailHeader from './components/header'
import detailList from './components/list'
import axios from  'axios'
	export default{
		name:'Detail',
		components:{
			detailBanner,
			detailHeader,
			detailList
		},
		data () {
			return {
				sightName:'',
				bannerImg:'',
				categoryList:[],
				gallaryImgs:[]
			}
		},
		methods: {
			getDetailInfo () {
			//	axios.get('/api/index.json?id'+ this.$route.params.id).then(this.handleGetDataSucc)
			axios.get('/api/detail.json',{
				params: {
						id:this.$route.params.id
					} 
				}).then(this.handleGetDataSucc)
			},
			handleGetDataSucc (res) {
				res=res.data
				if(res.ret&&res.data){
					const data=res.data
					this.sightName=data.sightName
					this.bannerImg=data.bannerImg
					this.categoryList=data.categoryList
					this.gallaryImgs=data.gallaryImgs
				}
			}
		},
		mounted () {
			this.getDetailInfo()
		}
	}
</script>

<style lang="stylus" scoped>
	.container
		height:50rem
</style>